<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multiple Select Box Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link type="text/css" rel="stylesheet" href="multipleselectbox.css" />
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.multipleselectbox.js"></script>
<style type="text/css">
body {
	margin: 20px 30px 500px 30px;
	padding: 0;
}

a {
	text-decoration: none;
}

fieldset {
	padding: 0 15px 15px 15px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

legend {
	padding: 10px 5px;
	font-size: small;
	font-weight: bold;
	text-decoration: underline;
}

legend a {
	color: blue;
}

pre {
	background-color: #eee;
	border: 1px solid gray;
	font-size: 0.8em;
	padding: 5px 15px;
	margin: 0;
}
</style>
</head>
<body>

<h3 style="text-align: center; text-decoration: underline;">jQuery
Multiple Select Box Plugin</h3>
<br />

<!-- ============================================================================================================== -->
<!-- The default multiple select box's tag of HTML -->
<!-- ============================================================================================================== -->

<fieldset><legend
	style="color: gray; text-decoration: line-through;">The
default multiple select box's tag of HTML</legend>
<div><select multiple="multiple" size="5" style="width: 500px;">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
	<option>Item 4</option>
	<option>Item 5</option>
	<option>Item 6</option>
	<option>Item 7</option>
	<option>Item 8</option>
	<option>Item 9</option>
	<option>Item 10</option>
	<option>Item 11</option>
	<option>Item 12</option>
	<option>Item 13</option>
	<option>Item 14</option>
	<option>Item 15</option>
	<option>Item 16</option>
	<option>Item 17</option>
	<option>Item 18</option>
	<option>Item 19</option>
	<option>Item 20</option>
	<option>Item 21</option>
	<option>Item 22</option>
	<option>Item 23</option>
	<option>Item 24</option>
	<option>Item 25</option>
</select></div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Description -->
<!-- ============================================================================================================== -->

<br />
<font size="4"><b>[ The jQuery multiple select box plugin ]</b></font>
<br />
<br />
<small><a
	href="http://plugins.jquery.com/project/jquerymultipleselectbox">http://plugins.jquery.com/project/jquerymultipleselectbox</a>
<br />
<a href="http://code.google.com/p/jquerymultipleselectbox/">http://code.google.com/p/jquerymultipleselectbox/</a>
</small>
<br />
<br />
<small>The example show how to use the jQueryMultipleSelectBox
to replace your browser's default multiple select box on an element with
overflow: auto.</small>
<br />
<small>You can see the result when controlling the mouse down
and drag out of the box.</small>
<br />
<br />
<small><b>Tested with: </b>Chrome 2+, Firefox 2+, IE 6+, Opera
10+, Safari 4+</small>

<!-- ============================================================================================================== -->
<!-- Simple Demo: -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentMultipleSelectBox').slideToggle('slow');">Simple
Demo: </a></legend>
<div id="contentMultipleSelectBox">
<ul id="MultipleSelectBox">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		$("#MultipleSelectBox").multipleSelectBox();
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		$("#MultipleSelectBox").multipleSelectBox();
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Simple Demo: Max Limit -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentMaxLimit').slideToggle('slow');">Simple Demo:
Max Limit</a></legend>
<div id="contentMaxLimit" style="display: none;">
<ul id="MultipleSelectBox_MaxLimit">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		$("#MultipleSelectBox_MaxLimit").multipleSelectBox({
			maxLimit : 5
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		$("#MultipleSelectBox_MaxLimit").multipleSelectBox({
			maxLimit : 5
		});
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Simple Demo: Scroll Speed -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentScrollSpeed').slideToggle('slow');">Simple Demo:
Scroll Speed</a>&nbsp;&nbsp;<font color="red"><small><b>New!</b></small></font></legend>
<div id="contentScrollSpeed" style="display: none;">
<ul id="MultipleSelectBox_ScrollSpeed">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		$("#MultipleSelectBox_ScrollSpeed").multipleSelectBox({
			scrollSpeed : 1
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		$("#MultipleSelectBox_ScrollSpeed").multipleSelectBox({
			scrollSpeed : 1
		});
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Simple Demo: Show Result -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentShowResult').slideToggle('slow');">Simple
Demo: Show Result</a></legend>
<div id="contentShowResult" style="display: none;">
<ul id="MultipleSelectBox_ShowResult">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<div><small><b>Result: </b></small><span id="showResult">&nbsp;</span></div>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		var showResult = document.getElementById("showResult");

		$("#MultipleSelectBox_ShowResult").multipleSelectBox({
			onSelectEnd : function(e, resultList) {
				/* put all results into a component */
				showResult.innerHTML = resultList.join(", ");
			}
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		var showResult = document.getElementById("showResult");

		$("#MultipleSelectBox_ShowResult").multipleSelectBox({
			onSelectEnd : function(e, resultList) {
				/* put all results into a component */
				showResult.innerHTML = resultList.join(", ");
			}
		});
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Simple Demo: Form Component -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentFormComponent').slideToggle('slow');">Simple
Demo: Form Component</a></legend>
<div id="contentFormComponent" style="display: none;">
<ul id="MultipleSelectBox_FormComponent">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<form action=""><input type="hidden" id="formComponent"
	name="formComponent" /><input type="submit" /><br />
</form>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		var formComponent = document.getElementById("formComponent");

		$("#MultipleSelectBox_FormComponent").multipleSelectBox({
			valueRendererArray : [ "aaa", "bbb", "ccc", "ddd", "eee" ],
			onSelectEnd : function(e, resultList) {
				/* put all results into a component */
				formComponent.value = resultList.join();
			}
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		var formComponent = document.getElementById("formComponent");

		$("#MultipleSelectBox_FormComponent").multipleSelectBox({
			valueRendererArray : [ "aaa", "bbb", "ccc", "ddd", "eee" ],
			onSelectEnd : function(e, resultList) {
				/* put all results into a component */
				formComponent.value = resultList.join();
			}
		});
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Simple Demo: Draw Range -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentDrawRange').slideToggle('slow');">Simple Demo:
Draw Range</a></legend>
<div id="contentDrawRange" style="display: none;">
<ul id="MultipleSelectBox_DrawRange">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<div><small><b>Draw Range: </b></small>&nbsp;&nbsp;<input
	id="drawRangeStartIndex" type="text" size="2" dir="rtl" value="3" />&nbsp;&nbsp;to&nbsp;&nbsp;<input
	id="drawRangeCurrentIndex" type="text" size="2" dir="rtl" value="10" />&nbsp;&nbsp;&nbsp;<input
	id="drawRangeButton" type="button" value="Go" /></div>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		var $drawRangeContainer = $("#MultipleSelectBox_DrawRange").multipleSelectBox();

		var drawRangeStartIndex = document.getElementById("drawRangeStartIndex");
		var drawRangeCurrentIndex = document.getElementById("drawRangeCurrentIndex");

		$("#drawRangeButton").click(function() {
			var startIndex = parseInt(drawRangeStartIndex.value) - 1;
			var currentIndex = parseInt(drawRangeCurrentIndex.value) - 1;
			$drawRangeContainer.drawMultipleSelectBox(startIndex, currentIndex);
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		var $drawRangeContainer = $("#MultipleSelectBox_DrawRange").multipleSelectBox();

		var drawRangeStartIndex = document.getElementById("drawRangeStartIndex");
		var drawRangeCurrentIndex = document.getElementById("drawRangeCurrentIndex");

		$("#drawRangeButton").click(function() {
			var startIndex = parseInt(drawRangeStartIndex.value) - 1;
			var currentIndex = parseInt(drawRangeCurrentIndex.value) - 1;
			$drawRangeContainer.drawMultipleSelectBox(startIndex, currentIndex);
		});
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Advance Demo: DropDown -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentDropDown').slideToggle('slow');">Advance Demo:
DropDown</a></legend>
<div id="contentDropDown" style="display: none;"><input
	type="text" id="controlDropDown" value="Click Me!" /><br />
<ul id="MultipleSelectBox_DropDown"
	style="position: absolute; background-color: white; display: none;">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		var controlDropDown = document.getElementById("controlDropDown");

		var $dropDownContainer = $("#MultipleSelectBox_DropDown").multipleSelectBox({
			onSelectEnd : function(e, resultList) {
				/* put all result's text into a form component */
				controlDropDown.value = resultList.join();
				/* slide up */
				$(this).slideUp();
			}
		});

		$(controlDropDown).click(function(e) {
			e.stopPropagation();
			$dropDownContainer.slideDown("slow");
			$(document).one("click", function() {
				$dropDownContainer.slideUp("slow");
			});
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		var controlDropDown = document.getElementById("controlDropDown");

		var $dropDownContainer = $("#MultipleSelectBox_DropDown").multipleSelectBox({
			onSelectEnd : function(e, resultList) {
				/* put all result's text into a form component */
				controlDropDown.value = resultList.join();
				/* slide up */
				$(this).slideUp();
			}
		});

		$(controlDropDown).click(function(e) {
			e.stopPropagation();
			$dropDownContainer.slideDown("slow");
			$(document).one("click", function() {
				$dropDownContainer.slideUp("slow");
			});
		});
	});
</pre></div>
</div>
</fieldset>

<!-- ============================================================================================================== -->
<!-- Advance Demo: Animation -->
<!-- ============================================================================================================== -->

<fieldset><legend><a href="javascript: void(0);"
	onclick="$('#contentAnimation').slideToggle('slow');">Advance Demo:
Animation</a></legend>
<div id="contentAnimation" style="display: none;">
<ul id="MultipleSelectBox_Animation">
	<li>Item 1</li>
	<li class="selected">Item 2</li>
	<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
	<li style="margin: 0 30px;">Style Item 4</li>
	<li><font size="6">Style <font size="3" color="blue"><u>Item
	5</u></font></font></li>
	<li class="disabled">Item 6 - Disabled</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
	<li>Item 18</li>
	<li>Item 19</li>
	<li>Item 20</li>
	<li>Item 21</li>
	<li>Item 22</li>
	<li>Item 23</li>
	<li>Item 24</li>
	<li>Item 25</li>
</ul>
<br />
<script type="text/javascript">
	$(document).ready(function() {
		$("#MultipleSelectBox_Animation").multipleSelectBox({
			onSelectStart : function(e, startIndex) {
				$(this).children().stop().css({
					opacity : "",
					backgroundColor : ""
				});
			},
			onSelectEnd : function(e, resultList) {
				$(this).children(":not(.selected)").css("background-color", "white").animate({
					opacity : 0.5
				}, "fast");
			}
		});
	});
</script><small><b>Usage: </b></small><br />
<div style="overflow: hidden;"><pre style="margin: 0 -50px;">
	$(document).ready(function() {
		$("#MultipleSelectBox_Animation").multipleSelectBox({
			onSelectStart : function(e, startIndex) {
				$(this).children().stop().css({
					opacity : "",
					backgroundColor : ""
				});
			},
			onSelectEnd : function(e, resultList) {
				$(this).children(":not(.selected)").css("background-color", "white").animate({
					opacity : 0.5
				}, "fast");
			}
		});
	});
</pre></div>
</div>
</fieldset>

</body>
</html>